import React, {useState, useRef } from 'react'

function TodoHead(props){
    const [todo,setTodo] = useState('')
    const changeTodo = (e) => {
        setTodo(e.target.value)
    }

    const input = useRef()
    const addItem = () => {
        // 调用父组件的addItem，并传递输入框的值
        props.addItem(todo)

        // 清空并自动获得焦点
        setTodo('')

        input.current.focus();
    }
    return (
        <div className="input-group mb-3">
            <input type="text" value={todo} onChange={changeTodo} className="form-control" ref={input} />
            <button className="btn btn-success" onClick={addItem}>添加</button>
        </div>
    )
}

export default TodoHead;